<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('仪表盘')}`">{{ $t('仪表盘') }}</t>
            <li>
                本示例配置来源：
                <a href="https://echarts.apache.org/examples/zh/editor.html?c=gauge-temperature" target="_blank">Echarts气温仪表盘</a>
            </li>
        </template>
        <sib-charts :options="options"></sib-charts>
        <p><a href="https://echarts.apache.org/examples/zh/index.html#chart-type-line" target="_blank">点击查看更多 Echarts 图表示例</a></p>
        <p><a href="https://echarts.apache.org/zh/option.html#title" target="_blank">点击查看 Echarts 图表详细配置文档</a></p>
    </example>
</template>

<script>
import { reactive, onMounted } from 'vue';

export default {
    setup() {
        const options = reactive({
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    splitNumber: 12,
                    itemStyle: {
                        color: '#FFAB91',
                    },
                    progress: {
                        show: true,
                        width: 30,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 30,
                        },
                    },
                    axisTick: {
                        distance: -45,
                        splitNumber: 5,
                        lineStyle: {
                            width: 2,
                            color: '#999',
                        },
                    },
                    splitLine: {
                        distance: -52,
                        length: 14,
                        lineStyle: {
                            width: 3,
                            color: '#999',
                        },
                    },
                    axisLabel: {
                        distance: -20,
                        color: '#999',
                        fontSize: 20,
                    },
                    anchor: {
                        show: false,
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '-15%'],
                        fontSize: 30,
                        fontWeight: 'bolder',
                        formatter: '{value} °C',
                        color: 'inherit',
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    itemStyle: {
                        color: '#FD7347',
                    },
                    progress: {
                        show: true,
                        width: 8,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
            ],
        });

        onMounted(() => {
            setInterval(() => {
                const value = +(Math.random() * 60).toFixed(2);
                options.series[0].data = [{ value }];
                options.series[1].data = [{ value }];
            }, 2000);
        });

        return {
            options,
            templateString: `<template>
    <div class="example-box">
        <sib-charts :options="options"></sib-charts>
    </div>
</template>

<script>
import { reactive, onMounted } from 'vue';

export default {
    setup() {
        const options = reactive({
            series: [
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    splitNumber: 12,
                    itemStyle: {
                        color: '#FFAB91',
                    },
                    progress: {
                        show: true,
                        width: 30,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 30,
                        },
                    },
                    axisTick: {
                        distance: -45,
                        splitNumber: 5,
                        lineStyle: {
                            width: 2,
                            color: '#999',
                        },
                    },
                    splitLine: {
                        distance: -52,
                        length: 14,
                        lineStyle: {
                            width: 3,
                            color: '#999',
                        },
                    },
                    axisLabel: {
                        distance: -20,
                        color: '#999',
                        fontSize: 20,
                    },
                    anchor: {
                        show: false,
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        valueAnimation: true,
                        width: '60%',
                        lineHeight: 40,
                        borderRadius: 8,
                        offsetCenter: [0, '-15%'],
                        fontSize: 30,
                        fontWeight: 'bolder',
                        formatter: '{value} °C',
                        color: 'inherit',
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
                {
                    type: 'gauge',
                    center: ['50%', '60%'],
                    startAngle: 200,
                    endAngle: -20,
                    min: 0,
                    max: 60,
                    itemStyle: {
                        color: '#FD7347',
                    },
                    progress: {
                        show: true,
                        width: 8,
                    },
                    pointer: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    data: [
                        {
                            value: 20,
                        },
                    ],
                },
            ],
        });

        onMounted(() => {
            setInterval(() => {
                const value = +(Math.random() * 60).toFixed(2);
                options.series[0].data = [{ value }];
                options.series[1].data = [{ value }];
            }, 2000);
        });

        return { options };
    },
};
<\/script>`,
        };
    },
};
</script>
